import { ProTable } from '@ant-design/pro-components';
import { Modal, message, type TableProps } from 'antd';
import { useState } from 'react';
import {
  authUserSelectAll,
  getAuthUserUnallocatedList,
} from '@/services/ant-design-pro/api';

type Props = {
  roleId: string;
  onClose?: (reflash: boolean) => void;
};
const App = (props: Props) => {
  const { roleId, onClose = () => {} } = props;
  const [pageNum] = useState<number>(1);
  const [pageSize] = useState<number>(10);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const ok = async () => {
    const { code, msg } = await authUserSelectAll({
      roleId: roleId,
      userIds: selectedRowKeys.join(','),
    });
    if (code === 200) {
      message.success('分配成功');
      onClose(true);
    } else {
      message.error(msg);
    }
  };
  const columns = [
    // 用户名称
    {
      title: '员工代码',
      dataIndex: 'userName',
      key: 'userName',
      search: false,
    },
    //用户昵称
    {
      title: '员工姓名',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    //手机号码
    {
      title: '手机号码',
      dataIndex: 'phonenumber',
      key: 'phonenumber',
      search: false,
    },
    //email
    // {
    //   title: "email",
    //   dataIndex: "email",
    //   key: "email",
    //   search: false,
    // },
    //status
    // {
    //   title: "状态",
    //   dataIndex: "status",
    //   key: "status",
    //   search: false,
    //   render: (_: any, record: any) => {
    //     return record.status === "0" ? (
    //       <Tag color="green">正常</Tag>
    //     ) : (
    //       <Tag color="red">停用</Tag>
    //     );
    //   },
    // },
    //create time
    // {
    //   title: "创建时间",
    //   dataIndex: "createTime",
    //   key: "createTime",
    //   search: false,
    // },
    //edit
    // {
    //   title: "操作",
    //   dataIndex: "option",
    //   key: "option",
    //   render: (_: any, record: any) => {
    //     return (
    //       <PopconfirmButton
    //         size="small"
    //         type="link"
    //         key={"cancel"}
    //         danger={false}
    //         title={`确定要取消 ${record.nickName} 吗？`}
    //         icon={<CheckCircleOutlined />}
    //         onConfirm={() => {
    //           cancel(record.userId, false);
    //         }}
    //       >
    //         删除
    //       </PopconfirmButton>
    //     );
    //   },
    // }
  ];
  const rowSelection: TableProps<Record<string, any>>['rowSelection'] = {
    onChange: (
      selectedRowKeys: React.Key[],
      selectedRows: Record<string, any>[],
    ) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
      setSelectedRowKeys(selectedRowKeys);
      // setSelectedRows(selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.admin, // Column configuration not to be checked
    }),
  };
  return (
    <Modal
      width={800}
      open={true}
      title="选择用户"
      onOk={ok}
      onCancel={() => {
        onClose(false);
      }}
    >
      <ProTable
        rowKey={'userId'}
        rowSelection={rowSelection}
        columns={columns}
        search={{
          span: 12,
        }}
        request={async (params) => {
          const sumbitData = { roleId, ...params, pageNum, pageSize };
          console.log(sumbitData);
          delete sumbitData.current;
          const { rows, success, total } =
            await getAuthUserUnallocatedList(sumbitData);
          return {
            data: rows,
            success,
            total,
          };
        }}
      />
    </Modal>
  );
};
export default App;
